<template>
  <div>
    <div class="in_header" v-if="!isJump">
      <el-form ref="form" :model="invocqdata" :inline="true">
        <el-form-item>
          <el-input
            v-model="invocqdata.inputValue"
            clearable
            @click.stop.native
            style="width: 200px"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item size="mini">
          <el-button
            type="primary"
            @click.stop.native
            icon="el-icon-search"
            @click="handleSearch"
            data-tracker="P58-1"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click.stop.native
            plain
            icon="el-icon-refresh"
            @click="handleReset"
            data-tracker="P58-2"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="in_concent">
      <div class="in_concent_left_1" v-if="invoice_body_belong == 0">
        <div
          v-for="(value, index) in reqWebsiteData"
          :key="index"
          :class="[
            'in_concent_left_pitch',
            pitchvalue1 == index ? 'choose_itch' : '',
          ]"
          @click="choosePitch(index, value.id)"
        >
          {{ value.branch_name }}
        </div>
      </div>
      <div class="in_concent_left_1" v-else>
        <div
          v-for="(value, index) in reqWebsiteData"
          :key="index"
          :class="[
            'in_concent_left_pitch',
            pitchvalue1 == index ? 'choose_itch' : '',
          ]"
          @click="choosePitch(index, value.id)"
        >
          {{ value.name }}
        </div>
      </div>
      <div class="in_concent_left_2">
        <div
          v-for="(value, index) in invoiceList"
          :key="index"
          :class="[
            'in_concent_left_pitch',
            pitchvalue2 == index ? 'choose_itch' : '',
          ]"
          @click="choosePitch2(index, value.id)"
        >
          {{ value.invoice_body_name }}
        </div>
        <div class="in_concent_button">
          <div v-if="invoice_body_belong == 0">
            <el-button
              data-tracker="P58-3"
              v-permission="'finance_invoice_book_create'"
              type="primary"
              plain
              @click="createinvoice()"
              style="margin-top: 10px"
              >增加</el-button
            >
          </div>
          <div v-else>
            <el-button
              data-tracker="P58-3"
              v-permission="'finance_invoice_book_create'"
              type="primary"
              plain
              @click="createinvoice()"
              style="margin-top: 10px"
              >增加发票主体</el-button
            >
          </div>
        </div>
      </div>
      <div class="in_concent_left_3">
        <div>
          <div v-if="invoice_body_belong == 0">
            <div style="margin: 0px 0px 10px 4.5%">
              <span style="font-size: 14px; color: #606266; padding: 0 12px 0 0"
                >账户类型:</span
              >
              <el-radio
                v-model="activeName_data"
                label="1"
                :disabled="disabledType"
                >备用金</el-radio
              >
              <el-radio
                v-model="activeName_data"
                :disabled="disabledType"
                label="0"
                >发票账号</el-radio
              >
            </div>

            <el-form
              :model="form"
              label-width="140px"
              ref="ruleForm"
              :rules="rules"
              v-if="activeName_data == 1"
              :key="activeName_data"
            >
              <el-form-item label="备用金账号:" prop="invoice_body_name">
                <el-input
                  v-model="form.invoice_body_name"
                  placeholder="请输入发票主体名称"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司地址:">
                <el-input
                  v-model="form.company_address"
                  placeholder="请输入公司地址"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司电话:">
                <el-input
                  v-model="form.company_phone"
                  placeholder="请输入公司电话"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行:" prop="bank_of_deposit">
                <el-input
                  v-model="form.bank_of_deposit"
                  placeholder="请输入开户行"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行账号:" prop="account_no">
                <el-input
                  v-model="form.account_no"
                  placeholder="请输入开户行账号"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="所属区域:" prop="belong_to_id">
                <el-select
                  v-model="form.belong_to_id"
                  filterable
                  placeholder="请选择所属组织"
                  style="width: 410px"
                >
                  <el-option
                    v-for="item in reqWebsiteData"
                    :key="item.id"
                    :label="item.branch_name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备用金余额:" prop="balance">
                <el-input
                  v-model="form.balance"
                  placeholder="备用金余额"
                  style="width: 410px"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="关联渡石发票主体:"
                prop="relation_invoice_body_id"
                v-if="invoice_body_belong == '1' || invoice_body_belong == '2'"
              >
                <el-select
                  v-model="form.relation_invoice_body_id"
                  placeholder="请选择关联渡石发票主体"
                  filterable
                  multiple
                  style="width: 410px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.invoice_body_name"
                    :value="item.id + ''"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  data-tracker="P58-4"
                  type="primary"
                  plain
                  @click="establish('ruleForm')"
                  v-if="type == 'add'"
                  >保存</el-button
                >
                <el-button
                  data-tracker="P58-5"
                  v-permission="'finance_invoice_book_update'"
                  type="primary"
                  plain
                  @click="editestablish('ruleForm')"
                  v-if="type == 'edit'"
                  >保存</el-button
                >
                <el-button
                  data-tracker="P58-6"
                  v-permission="'finance_invoice_book_delete'"
                  type="primary"
                  plain
                  @click="InvoiceBookdeleteFn()"
                  v-if="type == 'edit'"
                  >删除</el-button
                >
                <el-button
                  data-tracker="P58-6"
                  v-permission="'finance_invoice_book_delete'"
                  type="primary"
                  plain
                  @click="AccountStatement()"
                  v-if="activeName_data == 1 && type != 'add'"
                  >账号流水</el-button
                >
              </el-form-item>
            </el-form>
            <el-form
              :model="form"
              label-width="140px"
              ref="ruleForm"
              :rules="rules"
              v-if="activeName_data == 0"
              :key="activeName_data"
            >
              <el-form-item label="发票主体名称:" prop="invoice_body_name">
                <el-input
                  v-model="form.invoice_body_name"
                  placeholder="请输入发票主体名称"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="纳税人识别号:"
                prop="taxpayer_identify_number"
              >
                <el-input
                  v-model="form.taxpayer_identify_number"
                  placeholder="请输入纳税人识别号"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司地址:" prop="company_address">
                <el-input
                  v-model="form.company_address"
                  placeholder="请输入公司地址"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司电话:" prop="company_phone">
                <el-input
                  v-model="form.company_phone"
                  placeholder="请输入公司电话"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行:" prop="bank_of_deposit">
                <el-input
                  v-model="form.bank_of_deposit"
                  placeholder="请输入开户行"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行账号:" prop="account_no">
                <el-input
                  v-model="form.account_no"
                  placeholder="请输入开户行账号"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="关联渡石发票主体:"
                prop="relation_invoice_body_id"
                v-if="
                  (invoice_body_belong == '1' || invoice_body_belong == '2') &&
                  !isJump
                "
              >
                <el-select
                  v-model="form.relation_invoice_body_id"
                  placeholder="请选择关联渡石发票主体"
                  filterable
                  multiple
                  style="width: 410px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.invoice_body_name"
                    :value="item.id + ''"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  data-tracker="P58-4"
                  type="primary"
                  plain
                  @click="establish('ruleForm')"
                  v-if="type == 'add'"
                  >保存</el-button
                >
                <el-button
                  data-tracker="P58-5"
                  v-permission="'finance_invoice_book_update'"
                  type="primary"
                  plain
                  @click="editestablish('ruleForm')"
                  v-if="type == 'edit'"
                  >保存</el-button
                >
                <el-button
                  data-tracker="P58-6"
                  v-permission="'finance_invoice_book_delete'"
                  type="primary"
                  plain
                  @click="InvoiceBookdeleteFn()"
                  v-if="type == 'edit'"
                  >删除</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div v-else>
            <el-form
              :model="form"
              label-width="140px"
              ref="ruleForm"
              :rules="rules"
            >
              <el-form-item label="发票主体名称:" prop="invoice_body_name">
                <el-input
                  v-model="form.invoice_body_name"
                  placeholder="请输入发票主体名称"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="纳税人识别号:"
                prop="taxpayer_identify_number"
              >
                <el-input
                  v-model="form.taxpayer_identify_number"
                  placeholder="请输入纳税人识别号"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司地址:" prop="company_address">
                <el-input
                  v-model="form.company_address"
                  placeholder="请输入公司地址"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司电话:" prop="company_phone">
                <el-input
                  v-model="form.company_phone"
                  placeholder="请输入公司电话"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行:" prop="bank_of_deposit">
                <el-input
                  v-model="form.bank_of_deposit"
                  placeholder="请输入开户行"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行账号:" prop="account_no">
                <el-input
                  v-model="form.account_no"
                  placeholder="请输入开户行账号"
                  style="width: 410px"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="关联渡石发票主体:"
                prop="relation_invoice_body_id"
                v-if="
                  (invoice_body_belong == '1' || invoice_body_belong == '2') &&
                  !isJump
                "
              >
                <el-select
                  v-model="form.relation_invoice_body_id"
                  placeholder="请选择关联渡石发票主体"
                  filterable
                  multiple
                  style="width: 410px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.invoice_body_name"
                    :value="item.id + ''"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="bottom_add">
                <el-button
                  data-tracker="P58-4"
                  type="primary"
                  plain
                  @click="establish('ruleForm')"
                  v-if="type == 'add'"
                  >保存</el-button
                >
                <el-button
                  data-tracker="P58-5"
                  v-permission="'finance_invoice_book_update'"
                  type="primary"
                  plain
                  @click="editestablish('ruleForm')"
                  v-if="type == 'edit'"
                  >保存</el-button
                >
                <el-button
                  data-tracker="P58-6"
                  v-permission="'finance_invoice_book_delete'"
                  type="primary"
                  plain
                  @click="InvoiceBookdeleteFn()"
                  v-if="type == 'edit'"
                  >删除</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="table_table">
      <el-dialog
        title="备用金流水明细"
        :visible.sync="dialogTableVisible"
        width="70%"
      >
        <div class="table_header">
          <el-form ref="form" :model="query" :inline="true">
            <el-form-item label="收支类型" size="mini" style="width: 290px">
              <!-- <el-select filterable  v-model="query.type" style="width: 200px">
               
                <el-option label="支付" value="0"></el-option>
                <el-option label="收入" value="1"></el-option>
              </el-select> -->
              <el-select v-model="query.type" placeholder="请选择">
                <el-option
                  v-for="item in queryType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value + ''"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" size="mini" style="width: 340px">

              <el-date-picker
                v-model="query.create_time_list"
                type="daterange"
                value-format="timestamp"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                :default-time="['00:00:00', '23:59:59']"
                style="width: 230px"
              />
            </el-form-item>
            <el-form-item size="mini">
              <el-button
                type="primary"
                data-tracker="P50-1"
                icon="el-icon-search"
                @click="financeflow_listObj"
                >查询</el-button
              >
              <el-button
                plain
                icon="el-icon-refresh-left"
                data-tracker="P50-2"
                @click="resettingData"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        
        <div
          style="display: flex;justify-content: space-between; margin-bottom: 10px;"
        >  
        <div>   
          <el-button
          plain
          data-tracker="P50-2"
          @click="export_data()"
          >导出</el-button
        ></div>
        <div>
          <el-pagination
          @size-change="handleSizeChangeObjsize"
          @current-change="handleSizeChangeObj"
          :current-page="query.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="alltotal"
        >
        </el-pagination>
        </div>
        
        </div>
        <div class="table_data">
          <el-table :data="ordersList" border style="width: 120%">
            <el-table-column
              prop=""
              fixed
              label="序号"
              width="50"
              type="index"
            ></el-table-column>
            <el-table-column prop="type_name" label="收支类型" width="180">
            </el-table-column>
            <el-table-column prop="money" label="金额" width="180">
            </el-table-column>
            <el-table-column prop="balance" label="余额" width="240">
            </el-table-column>
            <el-table-column prop="account_name" label="户名" width="240">
            </el-table-column>
            <el-table-column prop="apply_no" label="对账单号" width="240">
            </el-table-column>
            <el-table-column
              prop="relation_id_name"
              label="客户/承运商名称"
              width="240"
            >
            </el-table-column>
            <el-table-column prop="account_number" label="账号" width="240">
            </el-table-column>
            <el-table-column prop="bank_name" label="银行名称" width="240">
            </el-table-column>
            <el-table-column prop="bank_number" label="银行行号" width="240">
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="240">
              <template slot-scope="scope">
                <span v-time="scope.row.create_time * 1000"></span>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="原因" width="240">
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { reqWebsiteList } from "@/api/customer";
import { organizationBox } from "@/api/organization";
import {
  InvoiceBookList,
  InvoiceBookCreate,
  InvoiceBookUpdate,
  customerList,
  carrierList,
  InvoiceBookoptions,
  InvoiceBookdelete,
  financeflow_list,
  invoice_book_flow_list,
} from "@/api/information";
export default {
  name: "invoivecomponent",
  props: ["invoice_body_belong", "isJump"],
  data() {
    return {
      type: "edit", //edit编辑 add 创建
      activeName_data: "0", // 0 其他 1 发票账号
      pager_count_value: 3,
      reqWebsiteData: "", //所属组织列表
      invoiceList: "", //发票主体的列表
      invocqdata: {
        page: 1,
        page_size: 12,
        inputValue: "",
      }, //搜索的名字
      pitchvalue1: 0, //控制选中的样式
      pitchvalue2: 0, //控制选中的样式
      form: {
        id: "",
        invoice_body_name: "", // 发票主体名称
        company_name: "", // 公司名
        taxpayer_identify_number: "", // 纳税人识别号
        company_address: "", // 公司地址
        company_phone: "", // 公司电话
        bank_of_deposit: "", // 开户行
        account_no: "", // 开户行账号
        invoice_body_belong: "", // 发票主体所属：0公司，1客户，2承运商
        belong_to_id: "", // 发票主体所属(公司、客户、承运商)id
        relation_invoice_body_id: [], // 关联公司发票主体id，客户和承运商字段
      },
      rules: {
        invoice_body_name: [
          { required: true, message: "请填写发票主体名称", trigger: "blur" },
        ], // 发票主体名称
        company_name: [
          { required: true, message: "请填写公司名", trigger: "blur" },
        ], // 公司名
        taxpayer_identify_number: [
          { required: true, message: "请填写纳税人识别号", trigger: "blur" },
        ], // 纳税人识别号
        company_address: [
          { required: true, message: "请填写公司地址", trigger: "blur" },
        ], // 公司地址
        company_phone: [
          { required: true, message: "请填写公司电话", trigger: "blur" },
        ], // 公司电话
        bank_of_deposit: [
          { required: true, message: "请填写开户行", trigger: "blur" },
        ], // 开户行
        account_no: [
          { required: true, message: "请填写开户行账号", trigger: "blur" },
        ], // 开户行账号
        relation_invoice_body_id: [
          {
            required: true,
            message: "请选择关联渡石发票主体",
            trigger: "blur",
          },
        ], // 关联公司发票主体id，客户和承运商字段
        belong_to_id: [
          { required: true, message: "请填写所属区域", trigger: "blur" },
        ]
      },
      options: [], //客户发票
      reqWebsitevalue: "", //选中的承运商
      totalvalue: 0, //总页数
      pagevalue: true,
      disabled_type1: false,
      disabled_type2: false,
      // 账号流水查询
      query: {
        id: "",
        type: "", // 收支类型 0支付 1收入
        create_time: {
          start_time: "",
          end_time: "",
        },
        create_time_list: [], //查询时间
        page: 1,
        page_size: 10,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dialogTableVisible: false,
      ordersList: [], //列表数据\
      alltotal: 0, //总条数
      queryType: [
        {
          value: "0",
          label: "支付",
        },
        {
          value: "1",
          label: "收入",
        },
      ],
      disabledType: false,
    };
  },
  mounted() {
    const params = this.$route.query;
    if (params.name && params.activeName === this.invoice_body_belong) {
      this.invocqdata.inputValue = params.name;
    }
    // 所属组织
    this.invoiceBodyvalue();
    // 发票主体所属
    this.InvoiceBookbodyFn();
    // 账号流水
    // this.financeflow_listObj()
  },

  methods: {
    // 通过进入页面的状态进行接口的调用
    invoiceBodyvalue() {
      switch (this.invoice_body_belong) {
        case "0":
          // 调用组织接口
          this.reqWebsiteListFn();
          break;
        case "1":
          // 调用客户接口
          this.clientListFn();
          break;
        case "2":
          // 承运商
          this.commonFn();
          break;
      }
    },
    // 查询
    handleSearch() {
      this.invoiceBodyvalue();
    },
    // 重置
    handleReset() {
      Object.assign(this.$data.invocqdata, this.$options.data().invocqdata);
      this.invoiceBodyvalue();
    },
    // 选中的样式
    choosePitch(index, id) {
      this.pitchvalue1 = index;
      this.pitchvalue2 = 0;
      this.InvoiceBookListFn(id);
      this.reqWebsitevalue = id;
    },
    choosePitch2(index, id) {
      this.type = "edit";
      this.disabledType = true;
      this.pitchvalue2 = index;
      var list = this.invoiceList.find((item) => {
        return item.id == id;
      });
      this.activeName_data = list.type;
      // 当数据为备用金账号的的时候是1 其他是0
      if (this.activeName_data == 1) {
        this.disabled_type1 = false;
        this.disabled_type2 = true;
      } else if (this.activeName_data == 0) {
        this.disabled_type1 = true;
        this.disabled_type2 = false;
      }
      this.form = { ...list };
      // console.log(list.type, "=====================");
      this.activeName_data = list.type;
    },
    //获取大区接口
    reqWebsiteListFn() {
      // let data = {
      //   branch_type: "3",
      //   name: this.invocqdata.inputValue,
      // };
      // reqWebsiteList(data).then((res) => {
      //   if (res.code === 10000) {
      //     this.reqWebsiteData = res.data;
      //     // 从新渲染当前的数据
      //     this.choosePitch(0, this.reqWebsiteData[0].id)
      //     // 进入页面调用发票主体列表
      //     this.InvoiceBookListFn(this.reqWebsiteData[0].id)
      //     this.reqWebsitevalue = this.reqWebsiteData[0].id
      //   }
      // });
      let data = {
        pid: 1,
        // name: this.invocqdata.inputValue,
      };
      organizationBox(data).then((res) => {
        if (res.code === 10000) {
          this.reqWebsiteData = res.data;
          // 从新渲染当前的数据
          if (this.reqWebsiteData) {
            this.choosePitch(0, this.reqWebsiteData[0].id);
            // 进入页面调用发票主体列表
            this.InvoiceBookListFn(this.reqWebsiteData[0].id);
            this.reqWebsitevalue = this.reqWebsiteData[0].id;
          }
        }
      });
    },
    // 获取渡石客户接口
    clientListFn() {
      var param = {
        page: this.invocqdata.page,
        page_size: this.invocqdata.page_size,
        name: this.invocqdata.inputValue,
        customer_type: "0", //渡石客户
      };
      customerList(param).then((res) => {
        if (res.code == "10000") {
          this.reqWebsiteData = res.data.list;
          this.totalvalue = res.data.pagination.total;
          // 从新渲染当前的数据
          if (this.reqWebsiteData) {
            this.choosePitch(0, this.reqWebsiteData[0].id);
            this.InvoiceBookListFn(this.reqWebsiteData[0].id);
            this.reqWebsitevalue = this.reqWebsiteData[0].id;
          }
        }
      });
    },
    // 获取承运商接口
    commonFn() {
      var param = {
        page: this.invocqdata.page,
        page_size: this.invocqdata.page_size,
        name: this.invocqdata.inputValue,
        carrier_type: "", // 委外
      };
      carrierList(param).then((res) => {
        this.reqWebsiteData = res.data.list;
        this.total = res.data.pagination.total;
        // 从新渲染当前的数据
        if (this.reqWebsiteData) {
          this.choosePitch(0, this.reqWebsiteData[0].id);
          this.InvoiceBookListFn(this.reqWebsiteData[0].id);
          this.reqWebsitevalue = this.reqWebsiteData[0].id;
        }
      });
    },
    // 创建接口
    establish(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var reqdata = "";
          if (this.activeName_data == 1) {
            reqdata = this.form.belong_to_id;
          } else {
            reqdata = this.reqWebsitevalue;
          }
          var param = {
            ...this.form,
            type: this.activeName_data, //0 是其他 1 是备用金
            invoice_body_belong: this.invoice_body_belong,
            belong_to_id: reqdata * 1,
            relation_invoice_body_id: this.form.relation_invoice_body_id,
          };
          InvoiceBookCreate(param).then((res) => {
            if (res.code == "10000") {
              this.InvoiceBookListFn(this.reqWebsitevalue);
              this.messageFn("创建成功", "success");
            }
          });
        }
      });
    },
    // 编辑数据
    editestablish(formName) {
      // console.log();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var reqdata = "";
          if (this.activeName_data == 1) {
            reqdata = this.form.belong_to_id;
          } else {
            reqdata = this.reqWebsitevalue;
          }
          var param = {
            ...this.form,
            type: this.activeName_data, //0 是其他 1 是备用金
            invoice_body_belong: this.invoice_body_belong,
            belong_to_id: reqdata * 1,
            relation_invoice_body_id: this.form.relation_invoice_body_id,
          };
          InvoiceBookUpdate(param).then((res) => {
            if (res.code == "10000") {
              this.InvoiceBookListFn(this.reqWebsitevalue);
              this.messageFn("编辑成功", "success");
            }
          });
        }
      });
    },
    // 获取数据的列表
    InvoiceBookListFn(id) {
      var param = {
        body_belong: this.invoice_body_belong, // 发票主体所属：0公司，1客户，2承运商
        belong_to_id: id + "", // 发票主体所属id
      };
      InvoiceBookList(param).then((res) => {
        if (res.code == "10000") {
          this.invoiceList = res.data;
          // console.log(this.invoiceList, "InvoiceBookList");
          if (this.invoiceList.length != 0) {
            this.choosePitch2(0, this.invoiceList[0].id);
          } else {
            this.createinvoice();
          }
        }
      });
    },
    createinvoice() {
      this.type = "add";
      this.disabled_type1 = false;
      this.disabled_type2 = false;
      this.disabledType = false;
      this.form.balance = 0
      Object.assign(this.$data.form, this.$options.data().form);
    },
    // 获取发票主体的下拉
    InvoiceBookbodyFn() {
      // // console.log(this.invoice_body_belong,"this.relation_invoice_body_id")
      var param = {
        body_belong: 0 + "", // 发票主体所属：0公司，1客户，2承运商
        belong_to_id: 0, // 发票主体所属id
        invoice_body_name: "", // 发票主体名
        type: 0 + "",
      };
      InvoiceBookoptions(param).then((res) => {
        if (res.code == "10000") {
          this.options = res.data;
        }
      });
    },
    // 删除主体
    InvoiceBookdeleteFn() {
      var param = {
        id: this.form.id,
      };
      InvoiceBookdelete(param).then((res) => {
        if (res.code == "10000") {
          this.InvoiceBookListFn(this.reqWebsitevalue);
          this.messageFn("删除成功", "success");
        }
      });
    },
    //  消息提示
    messageFn(value, type) {
      this.$message({
        message: value,
        type: type,
      });
    },
    handleCurrentChange(value) {
      this.invocqdata.page = value;
      this.invoiceBodyvalue();
    },

    // 重置
    resettingData() {
      Object.assign(this.$data.query, this.$options.data().query);
      this.financeflow_listObj();
    },
    // 账号流水
    financeflow_listObj() {
      var param = {
        ...this.query,
        id: this.form.id + "",
        create_time: {
          start_time:
            this.query.create_time_list.length != 0
              ? this.query.create_time_list[0] + ""
              : "",
          end_time:
            this.query.create_time_list.length != 0
              ? this.query.create_time_list[1] + ""
              : "",
        },
      };
      financeflow_list(param).then((res) => {
        this.ordersList = res.data.data || [];
        this.alltotal = res.data.pagination.total;
      });
    },
    AccountStatement() {
      this.dialogTableVisible = true;
      this.financeflow_listObj();
    },
    handleSizeChangeObjsize(val) {
      this.query.page_size = val;
      this.financeflow_listObj();
      // console.log(`每页 ${val} 条`);
    },
    handleSizeChangeObj(val) {
      this.query.page = val;
      this.financeflow_listObj();
      // console.log(`当前页: ${val}`);
    },
    export_data() {
      var param = {
        id: this.form.id + "",
        create_time: {
          start_time:
            this.query.create_time_list.length != 0
              ? this.query.create_time_list[0] + ""
              : "",
          end_time:
            this.query.create_time_list.length != 0
              ? this.query.create_time_list[1] + ""
              : "",
        },
      };
      invoice_book_flow_list(param).then((res)=>{
        if (res.code === 10000) {
            this.reqUrl = "https://" + res.data.loaded_url;
            window.open(this.reqUrl);
            // this.loadingfalse = false;
          }
      })
    }
  },
};
</script>
<style scoped lang="less">
.in_concent {
  // width: 100%;
  height: 500px;
  display: flex;

  .in_concent_left_1 {
    flex: 0 0 200px;
    border-right: 1px solid #ededed;
    height: 480px;
    overflow-x: hidden;
    overflow-y: auto;

    /* height: 500px;
      overflow-x: hidden;
      overflow-y: auto; */
    .in_concent_left_pitch {
      width: 200px;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .in_concent_left_pitch:hover {
      height: 40px;
      width: 200px;
      background: #e6f7ff;
      line-height: 40px;
      padding-left: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .choose_itch {
      height: 40px;
      width: 200px;
      background: #e6f7ff;
      line-height: 40px;
      padding-left: 20px;
      color: #2798ff;
      border-right: 4px solid #1890ff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .in_concent_left_2 {
    flex: 0 0 239px;
    border-right: 1px solid #ededed;
    height: 480px;
    overflow-x: hidden;
    overflow-y: auto;

    .in_concent_left_pitch {
      width: 239px;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .in_concent_left_pitch:hover {
      width: 239px;
      height: 40px;
      background: #e6f7ff;
      line-height: 40px;
      padding-left: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .choose_itch {
      width: 239px;
      height: 40px;
      background: #e6f7ff;
      line-height: 40px;
      padding-left: 20px;
      color: #2798ff;
      border-right: 4px solid #1890ff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .in_concent_button {
      width: 104px;
      margin: 0 auto;
    }
  }

  .in_concent_left_3 {
    width: 80%;
    .bottom_add {
      width: 70%;
      text-align: center;
      /* position: absolute; */
      /* bottom: 30px; */
    }
  }
}
</style>